<template>
  <div class="center">
    <div class="listBox" v-for="(item, index) in list">
      <div class="imgBox">
        <img :src="item.avatar" alt="">
      </div>
      <div class="cenBox">
        <div class="title"><span style="font-size: 16px;color: black;margin-right: 5px;">{{ item.name }}</span>
          {{ item.depName }}&nbsp;|&nbsp;{{ item.positionalTitles }}</div>
        <div class="title">
          <button class="btn">三级</button>
          {{ item.hospitalName }} {{ item.likeFlag }}
        </div>
      </div>
      <button  class="butBox" @click="onLike(item)" v-if="item.likeFlag==0">关注</button>
      <button  class="butBox1" @click="onLike1(item)" v-if="item.likeFlag==1">已关注</button>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { PageDocs } from '@/types/home';
import { ref } from 'vue'
 import { showToast } from 'vant';
defineProps<{
  list: PageDocs[]
}>()

import { getLikeAPI } from '@/api/home'
function onLike(item:any) {
  item.likeFlag=1
  const res= getLikeAPI('doc',item.id)
showToast('关注成功');
}
function onLike1(item:any) {
   item.likeFlag=0
  const res= getLikeAPI('doc',item.id)
showToast('取消关注成功');
}

console.log();
</script>

<style scoped lang="scss">
.center {
  width: 100%;
  flex: 1;

  .listBox {
    width: 96%;
    height: 60px;
    padding: 12px 2%;
    background-color: rgb(255, 255, 255);
    display: flex;

    .imgBox {
      width: 50px;
      height: 50px;
      border-radius: 50px;
      background-color: aliceblue;
      margin-right: 5px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50px;
      }
    }

    .cenBox {
      flex: 1;
      overflow: hidden;
      overflow: auto;
      // margin-top: 7px;
      font-size: 12px;

      .title {
        width: 100%;
        margin-bottom: 5px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #A0A0A0;

        .btn {
          width: 40px;
          padding: 0;
          border: none;
          background-color: #677FFF;
          color: white;
          border-radius: 2px
        }
      }
    }

    .butBox {
      width: 55px;
      height: 30px;
      margin-top: 15px;
      border: none;
      border-radius: 20px;
      background-color: #E9F7F6;
      color: #37B9AA;
    }
    .butBox1 {
      width: 60px;
      height: 30px;
      margin-top: 15px;
      border: none;
      border-radius: 20px;
      background-color: #eeeeee;
      color: #c4c4c4;
    }
  }
}
</style>
